import React from 'react';
import {Card, Form, Button, Input, Checkbox, message} from 'antd';
import {useNavigate} from 'react-router-dom';

import './index.scss';
import logo from '@/assets/logo.png';
import {useStore} from '@/store';

export default function Login() {
	// 获取路由跳转对象
	const navigate = useNavigate();
	// 获取store对象
	const {loginStore} = useStore();

	// 提交表单内容
	async function onFinish(values) {
		const {mobile, code} = values;
		try {
			// 登录成功跳转
			await loginStore.login({mobile, code});
			navigate('/');
		} catch (e) {
			// 登陆失败捕获报错
			message.error(e.response?.data?.message || '登录失败');
		}
	}
	return (
		<div className="login">
			<Card className="login-container">
				<img className="login-logo" src={logo} alt="" />
				{/* 登录表单 */}
				{/* 
					validateTrigger 必须写明组件内使用了什么事件,否则事件无法触发 
					initialValues  初始化表单数据
					onFinish    提交表单成功后的回调函数
				*/}
				<Form
					onFinish={onFinish}
					initialValues={{
						mobile: '13811111111',
						code: '246810',
						remember: true,
					}}
					validateTrigger={['onBlur', 'onChange']}>
					<Form.Item
						name="mobile"
						rules={[
							{
								pattern: /^1[3-9]\d{9}$/,
								message: '手机号码格式不对',
								validateTrigger: 'onBlur',
							},
							{required: true, message: '请输入手机号'},
						]}>
						<Input size="large" placeholder="请输入手机号" />
					</Form.Item>
					<Form.Item
						name="code"
						rules={[
							{len: 6, message: '验证码6个字符', validateTrigger: 'onBlur'},
							{required: true, message: '请输入验证码'},
						]}>
						<Input size="large" placeholder="请输入验证码" maxLength={6} />
					</Form.Item>
					<Form.Item name="remember" valuePropName="checked">
						<Checkbox className="login-checkbox-label">
							我已阅读并同意「用户协议」和「隐私条款」
						</Checkbox>
					</Form.Item>

					<Form.Item>
						<Button type="primary" htmlType="submit" size="large" block>
							登录
						</Button>
					</Form.Item>
				</Form>
			</Card>
		</div>
	);
}
